<template>
	<view>
		<view class="order-list" v-for="item in list4">
			<view class="item1">
				<view class="shop-name">{{item.shop_name}}</view>
				<view class="status" v-if="item.orderstate==0">未完成</view>
				<view class="status" v-if="item.orderstate==1">已完成</view>
				<view class="status" v-if="item.orderstate==2">已取消</view>
			</view>
			<view class="item2">
				<image class="sp-image" :src="item.goods_image"></image>
				<view class="good-Info">
					<view class="good-name">{{item.goods_name}}</view>
					<view class="good-yh">
						<view class="yh-icon">惠</view>1元购买核销后送100小时充电时长
					</view>
					<view style="display: flex;">
						<view class="good-price">￥{{item.price}}</view>
						<view class="good-num">×1</view>
					</view>
				</view>
			</view>
			<view class="item3" v-if="item.orderstate==0">
				<view class="order-num">订单编号：{{item.order_sn}}</view>
				<view style="display: flex;flex: 3;">
					<view class="cancelBtn" @click="cancelOrder(item)">取消订单</view>
					<view class=" useBtn" @click="toUse(item.qrcode)">去使用</view>
				</view>
			</view>
		</view>
		<view>
			<u-popup :show="show" mode="center" @close="close" @open="open" round="30">
				<view class="show-qrcode">
					<view class="tips">到店出示二维码，由店家核销操作</view>
					<view class="qr-codeBg">
						<image :src="qrcode" class="qrCode"></image>
					</view>
					<view class="useBtn2">长按保存</view>
					<view class="closeIcon" @click="close()"> </view>
				</view>
			</u-popup>
		</view>
	</view>


</template>

<script>
	import uQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/u-qrcode';


	import {
		myorder,
		cancelorder
	} from "../../api/home.js";
	import {
		url
	} from "../../utils/url.js";
	import {
		wechatConfig
	} from '../../api/public.js';
	export default {
		data() {
			return {
				text: '测试测试测试测试',
				size: 200,
				uQRCode: "测试测试测试测试",
				show: false,
				text: 20,
				current: 0,
				activeStyle: {
					color: '#000000',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#808080',
					transform: 'scale(1)'
				},
				q: "",
				cate_id: "",
				lng: "",
				lat: "",
				newDetail: {}, // 咨询详情
				list4: [],
				shoplist: [],
				qrcode:""

			}
		},
		onLoad(e) {
			this.init()
		},
		methods: {
			toUse(qrcode) {
				this.show = true;
				this.qrcode = qrcode;
				console.log(qrcode)
			},
			open() {
				this.show = true;
			},
			close() {
				this.show = false
				this.init()
			},
			save() {
				this.$wx.downloadImage({
					serverId: this.qrcode, // 需要下载的图片的服务器端ID，由 uploadImage 接口获得
					isShowProgressTips: 1, // 默认为1，显示进度提示
					success: function(res) {
						//alert(JSON.stringify(res))
					}
				});
				// uni.getImageInfo({ //下载
				// 	src: this.qrcode, //图片下载地址
				// 	success: res => {
				// 		console.log('downloadFile', res);
				// 		this.show = false
				// 		if (res.statusCode === 200) {
				// 			uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
				// 				filePath: res.tempFilePath, //图片文件路径
				// 				success: function() {
				// 					uni.showToast({
				// 						title: '图片保存成功',
				// 						icon: 'none',
				// 					});
				// 				},
				// 				fail: function(e) {
				// 					uni.showToast({
				// 						title: '图片保存失败',
				// 						icon: 'none',
				// 					});
				// 				}
				// 			});
				// 		}
				// 	},
				// 	fail: function(e) {
				// 		console.log('downloadFile', e);
				// 		this.show = false
				// 		uni.showToast({
				// 			title: '图片保存失败',
				// 			icon: 'none',
				// 		});
				// 	}
				// });
			},

			async init() {
				uni.showLoading({
					title: ""
				})
				var data = {
					user_id: uni.getStorageSync('uid')
				}
				data.token = uni.getStorageSync('token')
				var res = await myorder(data);

				if (res.data.code == 1) {
					let newDetail = res.data.data;
					console.log(newDetail);
					this.list4 = newDetail;
					uni.hideLoading()
				}else{
					uni.$u.toast(res.data.msg)
					uni.hideLoading()
				}
			},

			cancelOrder(item) {
				let that=this
				var data = {
					token: wx.getStorageSync("token"),
					order_sn: item.order_sn,
				}
				uni.showModal({
					title: '提示',
					content: '是否确认取消订单?',
					success: function(res) {
						if (res.confirm) {
							cancelorder(data).then(res => {
								if(res.data.code=1){
									console.log("orderpay", res);
									uni.$u.toast('订单已取消')
									setTimeout(function() {
										that.init();
									}, 1000);
								}else{
									uni.$u.toast(res.data.msg)
									setTimeout(function() {
										that.init();
									}, 1000);
								}
								
							})
						} else if (res.cancel) {}
					}
				});

			},
			getConfig() {
				var data = {
					url: encodeURIComponent(location.href.split('#')[0])
				}
				wechatConfig(data).then(res => {
					this.initJsdk(res.data.data)
				})
			},
			initJsdk(config) {
				//alert("initJsdk");
				this.$wx.config({
					debug: false, // 开启调试模式
					appId: config.appId, // 必填，公众号的唯一标识
					timestamp: config.timestamp, // 必填，生成签名的时间戳
					nonceStr: config.nonceStr, // 必填，生成签名的随机串
					signature: config.signature, // 必填，签名，见附录1
					jsApiList: config.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				})
				this.$wx.ready(function() {
					this.$wx.checkJsApi({
						jsApiList: ['openLocation', 'scanQRCode', 'checkJsApi', downloadImage],
					})
				})
				this.$wx.error(function(res) {});

			},
		}
	}
</script>

<style>
	.closeIcon {
		width: 38rpx;
		height: 38rpx;
		background-image: url('@/static/images/close.png');
		background-repeat: round;
		content: "";
		z-index: 10;
		position: absolute;
		bottom: -60rpx;
	}

	.useBtn2 {
		position: absolute;
		color: white;
		border-radius: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, #98E05F, #0DE3AC);
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 72rpx;
		bottom: 35rpx;
		width: 190rpx;
		height: 72rpx;
	}

	.show-qrcode {
		width: 560rpx;
		height: 570rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tips {
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 69rpx;
	}

	.qr-codeBg {
		width: 416rpx;
		height: 405rpx;
		background-image: url('@/static/images/codeBg.png');
		background-repeat: round;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.qrCode {
		width: 360rpx;
		height: 360rpx;
	}

	.yh-icon {
		width: 26rpx;
		height: 26rpx;
		background: #F5750A;
		font-size: 10rpx !important;
		border-radius: 4rpx;
		content: "惠";
		color: white;
		margin-right: 4rpx;
		text-align: center;
	}

	.order-list {
		background-color: white;
		padding: 0 40rpx;
		margin-bottom: 40rpx;
	}

	.item1 {
		display: flex;
		border-bottom: 1px solid #DCDCDC;
	}

	.shop-name {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 86rpx;
		flex: 1;
	}

	.status {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FF3434;
		line-height: 86rpx;
	}

	.item2 {
		display: flex;
		padding: 30rpx 0;
		/* 		border-bottom: 1px solid #DCDCDC;*/
	}

	.sp-image {
		width: 164rpx;
		height: 164rpx;
		flex: 1;
	}

	.good-Info {
		margin-left: 20rpx;
		flex: 3;
	}

	.good-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 69rpx;
	}

	.good-yh {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		display: flex;
		/* 		line-height: 69rpx; */
	}

	.good-price {
		flex: 3;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF3434;
		line-height: 69rpx;
	}

	.good-num {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 69rpx;
	}

	.item3 {
		width: 750rpx;
		height: 114rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
	}

	.order-num {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #808080;
		line-height: 69rpx;
		flex: 2;
	}

	.cancelBtn {
		background-color: rgba(238, 238, 238, 1);
		color: white;
		width: 170rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 35px;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #4D4D4D;
		line-height: 72rpx;
		margin-right: 30rpx;
	}

	.useBtn {

		width: 170rpx;
		height: 72rpx;
		color: white;
		border-radius: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, #98E05F, #0DE3AC);
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 72rpx;
	}
</style>
